<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
    String path = request.getContextPath(); //web项目的根路径
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用户列表</title>
<style type="text/css">
div.list {
	width: 500px;
	margin: 50px auto;
	background-color: #EEE;
	padding: 20px 50px;
	text-align: center;
	position: relative;
}

table {
	width: 100%
}

table tr th, td {
	border: 1px solid #FFF;
	width: 25%;
}

a.logout ,input {
	border: 0;
	background-color: #0099E6;
	margin: 5px 20px;
	padding: 10px;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
	border-radius: 5px;
	text-decoration: none;
	color: white;
}

a.delete {
color: red;
text-decoration: none;
}


</style>
<script src="<%=basePath  %>js/jquery.min.js"></script>
</head>
<body>
	<div class="list">
		<a class="logout" href="<%=basePath %>logout" style="right: 10px; position: absolute;">返回</a>
		<h2>用户列表</h2>
		<form action="searchUserByName">
			<div>
				<label>账号：</label> <input type="text" name="userName"> <input
					type="submit" value="查询">
			</div>
		</form>
		
		<c:if test="${not empty list }">
		<table>
			<thead>
				<tr>
					<th>ID</th>
					<th>帐号</th>
					<th>密码</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach items="${list }" var="d">
					<tr>
						<td>${d.userId }</td>
						<td>${d.userName }</td>
						<td>${d.userPassword }</td>
						<td><a class="delete" href="#" onclick="deleteUserById(${d.userId })">删除</a></td>
					</tr>
				</c:forEach>
			</tbody>
		</table>
		</c:if>
				<c:if test="${!empty userList }">
			<table>
				<thead>
					<tr>
						<th>ID</th>
						<th>帐号</th>
						<th>密码</th>
					    <th>操作</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach items="${userList }" var="user">
						<tr>
							<td>${user.userId }</td>
							<td>${user.userName }</td>
							<td>${user.userPassword }</td>
							<td><a class="delete" href="#" onclick="deleteUserById(${user.userId })">删除</a></td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
		</c:if>
		
		<c:if test="${!empty msg }">
			<h1>${msg }</h1>
		</c:if>
		
	</div>
</body>
<script type="text/javascript">
		function deleteUserById(userId){
			var r = confirm("确定要删除改用户吗");
			if ( r == true){
				$.ajax({  
					type : "get",  //提交方式  
					url : "<%=basePath %>deleteUser",//路径  
					data : {  
					   "userId": userId
					},//数据，这里使用的是Json格式进行传输  
					success : function(result) { //返回数据根据结果进行相应的处理 
						var data = eval("("+result+")");//将字符串格式化为json对象
						if (data.success) {  
							$("#code").attr("placeholder","验证码发送成功，请前往邮箱查看")
						} else {  
							$("#code").attr("placeholder","验证码发送失败，请稍后重试");
						}  
					}  
				});
			}
			else{
				return false;				
			}
			
		}
	</script>
</html>